<template>
  <view class="flex flex-col h-full">
    <u-navbar class="text-right" placeholder border auto-back/>
    <u-list class="flex-1">
      <template v-for="item in notifList">
        <u-list-item>
          <view class="p-10px bg-white" @click="handlerNotifItemClick(item)">
            <label class="text-16px text-slate-500 font-bold block">{{item.title}}</label>
            <label class="block text-12px text-slate-500">
              {{item.content}}
            </label>
            <view class="flex justify-between text-12px text-slate-400 mt-5px">
              <label></label>
              <label>{{item.createTime}}</label>
            </view>
          </view>
        </u-list-item>
        <u-line/>
      </template>
    </u-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import UList from "@/uni_modules/uview-plus/components/u-list/u-list.vue";
import type {Notif} from "@/api/user";
import UListItem from "@/uni_modules/uview-plus/components/u-list-item/u-list-item.vue";
import ULine from "@/uni_modules/uview-plus/components/u-line/u-line.vue";
// 通知数据列表
const notifList = ref<Notif[]>([
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
  {
    nId: 1,
    title: '测试通知',
    content: '这是测试通知的内容',
    createTime: '2023-03-01 11:54:20',
    updateTime: '',
    viewStatus: 0,
    viewTime: ''
  },
])
// 通知子项点击事件
const handlerNotifItemClick = (item: Notif) => {
  //跳转通知详情页码
  uni.navigateTo({
    url: `/pages/notifDetail/index?nId=${item.nId}`
  })
}
</script>

<style lang="scss">
</style>
